<script setup lang="ts">

</script>

<template>
    <div class="footer">
        <div class="text">
            <h2>为您节省 90% 的 PPT 设计时间</h2>
            <p>8 年专注，200+ 国家/地区，3500万 用户智选</p>
        </div>
        <div class="experienceAndService">
            <button class="experience">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="#fff">
                    <path
                        d="M10 3.30005C10.3866 3.30005 10.7 3.61345 10.7 4.00005L10.7 10.9165L11.6264 9.9902C11.8998 9.71683 12.343 9.71683 12.6163 9.9902C12.8897 10.2636 12.8897 10.7068 12.6163 10.9801L10.495 13.1015C10.2217 13.3748 9.77844 13.3748 9.50507 13.1015L7.38375 10.9801C7.11039 10.7068 7.11039 10.2636 7.38375 9.9902C7.65712 9.71683 8.10034 9.71683 8.3737 9.9902L9.30005 10.9165V4.00005C9.30005 3.61345 9.61345 3.30005 10 3.30005Z">
                    </path>
                    <path
                        d="M15 16.7C15.9389 16.7 16.7 15.9389 16.7 15L16.7 11C16.7 10.6135 16.3866 10.3 16 10.3C15.6135 10.3 15.3 10.6135 15.3 11V15C15.3 15.1657 15.1657 15.3 15 15.3L5.00005 15.3C4.83436 15.3 4.70005 15.1657 4.70005 15L4.70005 11C4.70005 10.6134 4.38665 10.3 4.00005 10.3C3.61345 10.3 3.30005 10.6134 3.30005 11V15C3.30005 15.9389 4.06116 16.7 5.00005 16.7L15 16.7Z">
                    </path>
                </svg>
                立即体验
            </button>
            <button class="service">
                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M5.99996 4.45996C4.8733 4.45996 3.95996 5.3733 3.95996 6.49996V19.7C3.95996 20.1639 4.33604 20.54 4.79996 20.54L19.2 20.54C19.6639 20.54 20.04 20.1639 20.04 19.7V11.9299C20.04 11.0477 19.4729 10.2654 18.6345 9.99105L13.44 8.29103V6.49996C13.44 5.3733 12.5266 4.45996 11.4 4.45996H5.99996ZM13.44 10.0587V18.86H18.36V11.9299C18.36 11.7742 18.2599 11.6361 18.1119 11.5877L13.44 10.0587ZM11.76 6.49996C11.76 6.30114 11.5988 6.13996 11.4 6.13996H5.99996C5.80114 6.13996 5.63996 6.30114 5.63996 6.49996V18.86H11.76V6.49996Z"
                        fill="#2F2F2F"></path>
                </svg>
                企业服务
            </button>
        </div>
    </div>
</template>

<style scoped lang="less">
.footer {
    background-color: #fff;
}

.text {
    margin-top: 40px;
    text-align: center;

    h2 {
        font-size: 40px;
    }

    p {
        margin-top: 10px;
        font-size: 14px;
    }
}

.experienceAndService {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0 60px 0;


    .experience {
        cursor: pointer;
        background: linear-gradient(to right, rgb(248, 77, 77), rgb(255, 107, 66));
        color: #fff;
        border: 1px solid transparent;
        width: 90px;
        height: 30px;
        font-size: 12px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
            display: block;
            width: 15px;
        }

        &:hover {
            background: linear-gradient(to right, rgb(238, 74, 74), rgb(245, 102, 64));
        }
    }

    .service {
        cursor: pointer;
        background-color: #fff;
        border: 1px solid rgb(231, 232, 235);
        margin-left: 20px;
        width: 90px;
        height: 30px;
        font-size: 12px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
            display: block;
            width: 15px;
        }

        &:hover {
            background-color: rgb(245, 246, 249);
        }
    }
}
</style>
